<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>v-bind指令的用法</title>
		<!-- 引入vue的js文件 -->
		<script src="js/vue.js"></script>
		<!-- 引入axios网络请求库 -->
		<script src="https://unpkg.com/axios/dist/axios.min.js"></script>

		<style>
			
		</style>
	</head>
	<body>
		<div id="app">
			<button @click="getJoke()">获取笑话</button>
			<ul>
				<li v-for="item in jokes">{{item}}</li>
			</ul>
			
			
		</div>		
	</body>
	<script>
	var app=new Vue({
		el:"#app",
		data:{
			jokes:[]
			
		},
		methods:{
			getJoke:function(){
				console.log("请求发起前------------")
				console.log(this)
				var that=this
				axios.get('https://autumnfish.cn/api/joke/list?num=3')
				  .then(function (response) {
					  console.log("请求发起后------------")
					  console.log(that)
				    console.log(response.data);
					that.jokes=response.data.data
				  })
				  .catch(function (error) {
				    console.log(error);
				  });
			}
			
		}
	})
	
	</script>
</html>
